<template>
  <van-button v-if="isFollow" class="follow-btn" round size="small" @click="followUser" :loading="loading">已关注</van-button>

  <van-button v-else class="follow-btn" type="info" color="#3296fa" round size="small" icon="plus" @click="followUser" :loading="loading">关注</van-button>
</template>

<script>
import { addFollowAPI, deteleFollowAPI } from '@/api/User.js'
export default {
  name: 'followUser',
  props: {
    isFollow: {
      type: Boolean,
      require: true
    },
    articleId: {
      type: [Number, String, Object],
      require: true
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async followUser() {
      this.loading = true //展示loading状态
      // 如果已关注，则取消关注
      const authorId = this.articleId
      try {
        if (this.isFollow) {
          // 取消关注
          await deteleFollowAPI(authorId)
          // this.article.is_followed = false
          // console.log(data)
        } else {
          // 获取关注
          await addFollowAPI(authorId)
          // this.article.is_followed = true
          // console.log(data)
        }
        // 更新视图状态
        // this.article.is_followed = !this.article.is_followed
        this.$emit('updata-followuser', !this.isFollow)
      } catch (err) {
        let message = '操作失败，请重试！'
        if (err.response && err.response.status === 400) {
          message = '你不能关注你自己！'
        }
        this.$toast(message)
      }
      this.loading = false //关闭loading状态
    }
  }
}
</script>

<style></style>
